import React, { useState, useEffect } from 'react';
import "./style.scss"

import { Upload, Image, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

import { getUrl, postUrl } from "../../utils/request"

const Index = () => {
    const [list, setList] = useState([])
    useEffect(() => {
        const http = async () => {
            const res = await getUrl('/list');
            console.log(res.data)
            setList(res.data.data.objects)
        }

        http();
    })

    const props = {
        action: '/api/upImg',
        // beforeUpload: file => {
        //     // if (file.type !== 'image/png') {
        //     //   message.error(`${file.name} is not a png file`);
        //     // }
        //     // return file.type === 'image/png' ? true : Upload.LIST_IGNORE;
        // },

        onChange: info => {
            console.log(info.fileList);
        },
    };

    const getImage = async (name) => {
        const res = await postUrl('/get', { name });
        window.open(res.data.data)
    }
    return (
        <div className='123'>
            <Upload {...props}>
                <Button icon={<UploadOutlined />}>上传</Button>
            </Upload>
            <div>
                {
                    list ? list.map((item, index) => (
                        <div key={index}>
                            <Image src={item.url} width={100} height={200} />
                            <Button onClick={() => getImage(item.name)}>下载</Button>
                        </div>
                    )) : null
                }
            </div>
        </div>
    );
}

export default Index;



